<template>
	<view style="overflow: hidden;">
		<!-- <u-navbar :background="{background: 'rgba(255,255,255, 0)'}" :immersive="true" :border-bottom="false"></u-navbar> -->
		<!-- 轮播图 -->
		<view  class="prism-player" >
			<view v-if="!showVideo">
				<image style="width:100%;" :src="'https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/'+intorductionVo.picture" mode="widthFix"></image>
			</view>
			<!-- <u-swiper v-if="!showVideo" height="375" border-radius="0" :list="swiper"></u-swiper> -->
			<!-- <view  id="J_prismPlayer"  v-if="showVideo"></view> -->
			<video @ended="initCourseDetail" @timeupdate="videoSeeTime" id="myVideo" style="width: 100%;" v-if="showVideo" :src="videoSrc" autoplay :controls="canControl"></video>
		</view>
		<!-- 切换 -->
		<view class="u-flex u-row-around u-border-bottom">
			<view class="u-text-center" @click="switchTab(1)">
				<view class="text" style="line-height: 80rpx;">课程简介</view>
				<view class="line" 
				style="width: 35%;height: 10rpx;border-radius: 10rpx;margin: 0 auto;" 
				:style="{background:activeTab == '1'?'#F53939':''}"
				></view>
			</view>
			<view class="u-text-center"  @click="switchTab(2)">
				<view class="text" style="line-height: 80rpx;">课程目录</view>
				<view class="line" 
				style="width: 35%;height: 10rpx;border-radius: 10rpx;margin: 0 auto;"
				:style="{background:activeTab == '2'?'#F53939':''}"
				></view>
			</view>
			<view class="u-text-center" @click="switchTab(3)">
				<view class="text" style="line-height: 80rpx;">课程评论</view>
				<view class="line" 
				style="width: 35%;height: 10rpx;border-radius: 10rpx;margin: 0 auto;"
				:style="{background:activeTab == '3'?'#F53939':''}"
				></view>
			</view>
		</view>
		
		<scroll-view style="height: calc(100vh - 245px); background:#f5f5f5;" :scroll-y="true" :scroll-into-view="scrollTop" :scroll-with-animation="true">
		<!-- 详情 -->
		<view class="section" id="detail">
			<view class="section-title">课程简介</view>
			<view class="title"><text style="color:#F53939">【{{intorductionVo.lessonLable}}】</text>{{intorductionVo.lessonName}}</view>
			<view class="u-flex u-m-t-30 u-row-between">
				<view class="star u-flex">
					<image v-for="item in 5" :key="item" :src="`../../../static/home/star${item <= intorductionVo.starScore ? '-full' : ''}@2x.png`" style="width: 18rpx;" mode="widthFix"></image>
					<text class="u-m-l-10 u-font-24">{{intorductionVo.starScore || ''}}</text>
				</view>
				<view class="u-flex" style="color: #BFBFBF;">
					<view class="u-font-24">点赞：{{intorductionVo.supportNumber || 0}}</view>
				</view>
			</view>
			<view class="u-flex u-m-t-30 u-row-between" style="color: #BFBFBF;">
				<view class="u-font-24">课程时长：{{intorductionVo.lessonDuration}}分钟</view>
				<view class="u-font-24">播放量：{{intorductionVo.broadcastNumber || 0}}</view>
			</view>
			<view class="u-font-24 u-m-t-15" style="color: #BFBFBF;">讲师：{{intorductionVo.lecturer}}</view>
			<view class="u-font-24 u-m-t-40" style="color: #262626;line-height: 38rpx;">
				{{intorductionVo.introduction}}
			</view>
		</view>
		<!-- 课程章节目录 -->
		<view class="section" id="chapter">
			<view class="section-title">课程目录</view>

			<u-collapse>
				<u-collapse-item v-for="(item, index) in chapterClassifyVoList" :key="index" open>
					<view slot="title" style="display:flex; flex-direction: row;">
						<view style="color: #262626;flex:1;display:flex;">{{item.chapterName}}</view>
						<view v-if="item.isDone == 1" class="u-font-28" style="color: #62DB01;" >已完成</view>
					</view>
					<!-- 目录 -->
					<view style="padding:0 0 30rpx 30rpx;">
						<view v-for="(listItem,idx) in item.coursewareInfoVoList" :key="idx" class="u-m-b-20 u-flex u-row-between" style="justify-content: center;">
							<view class="course-name" :class="{on: curCourseId === listItem.coursewareId}" @click="lessonClick(listItem, item)">{{listItem.coursewareName}}</view>
							<view v-if="listItem.isComplete" class="u-font-28" style="color: #62DB01; margin-top: 20rpx;">已完成</view>
							<!-- 课件类型:1.视频;2.音频;3.图片; -->
							<image v-else-if="listItem.coursewareType != 3 && curCourseId === listItem.coursewareId" style="width: 24rpx;margin-top:20rpx;" src="../../../static/playing.gif" mode="widthFix"></image>
						</view>
					</view>
				</u-collapse-item>

				<u-collapse-item v-if="chapterClassifyVoList && chapterClassifyVoList.length" title="考试中心" open>
					<!-- 目录 -->
					<view style="padding-left:30rpx;">
						<view class="u-m-b-20 u-flex u-row-between" @click="goExam(1)">
							<view class="u-font-28" style="color: #262626; margin: 10rpx 0;">课程练习</view>
						</view>
						<view class="u-m-b-20 u-flex u-row-between" @click="goExam(0)">
							<view class="u-font-28" style="color: #262626; margin: 10rpx 0;">课程考试</view>
							<!-- <image style="width: 24rpx; color: #7f7f7f; " src="../../../static/lock.png" mode="widthFix"></image> -->
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<!-- 课程评论 -->
		<view class="section" id="comment">
			<view class="section-title">课程评论</view>
			<view class="" style="position: relative; padding: 20rpx 0 30rpx; border-bottom:1px solid #f5f5f5"  v-for="(item,idx) in commentList" :key="idx">
				<view class="u-flex u-m-b-15">
					<view class="avatar">
						<image style="width: 56rpx;" src="../../../static/class/menu/steward.png" mode="widthFix"></image>
					</view>
					<view class="u-flex-1 u-flex u-row-between u-p-l-20">
						<view class="">
							<view class="u-font-32" style="color: #333;">{{item.userName || '匿名用户'}}</view>
							<view class="u-font-24" style="color: #7f7f7f;">{{item.commentTime}}</view>
						</view>
						<!-- reply -->
						<view class="u-flex">
							<image style="width: 36rpx;" src="../../../static/course/edit@2x.png" mode="widthFix"></image>
							<view class="u-m-l-8 u-font-24" style="color: #BFBFBF;" @click="reapply(item.commentId)">回复</view>
						</view>
					</view>
				</view>
				<view class="u-m-b-15" style="margin-left:76rpx;">{{item.content}}</view>
				<view v-if="item.children && item.children.length" class="u-line-3 u-font-24" style="margin-left:76rpx; background: #F5F5F5;padding: 4rpx 4rpx 4rpx 20rpx;">
					<view v-for="(item2,idx2) in item.children" :key="idx2">
						<text class="" style="color: #7f7f7f;">{{item2.userName || '匿名用户'}}：</text>{{item2.content}}
					</view>
				</view>
			</view>
		</view>
		<view class="u-flex u-row-center u-p-b-20" style="background:#fff;" >
			<navigator :url="`../review/review?id=${courseId}`" class="" style="padding: 15rpx 25rpx;border: 1rpx solid #030000;border-radius: 50rpx;">
				<text style="font-size: 28rpx;color: #262626;">查看全部评论</text>
			</navigator>
		</view>
		</scroll-view>
		<!-- 点赞评价参加考试 -->
		<view class="" style="background: #FFFFFF;position: fixed;bottom: 0;left: 0;right: 0;z-index: 99;">
			<view class="u-p-25 u-flex u-row-between">
				<view class="u-flex" @click="clickPoint">
					<image  style="width: 44rpx;" :src="require(isPraise ? '../../../static/course/like-fill@2x.png' : '../../../static/course/like@2x.png')" mode="widthFix"></image>
					<view class="u-font-24 u-m-l-10">{{intorductionVo.supportNumber}}</view>
				</view>
				<view class="u-flex" style="padding: 24rpx;box-sizing: border-box;">
					<view class="u-font-26" style="border-radius: 25rpx;background: #FA541C;color: #FFFFFF;padding: 2rpx 15rpx;margin-right:20rpx;" @click="showCommentHandler()">课程评价</view>
					<view v-if="chapterClassifyVoList && chapterClassifyVoList.length" class="u-font-26 u-m-l-20" @click="goExam(0)" style="border-radius: 25rpx;background: #FA541C;color: #FFFFFF;padding: 2rpx 15rpx;">去考试</view>
					<view v-else class="u-font-26 u-m-l-20" style="border-radius: 25rpx;background: #f5f5f5;color: #aaa;padding: 2rpx 15rpx;">去考试</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showComment" mode="center" closeable width="600rpx" height="400rpx">
				<view style="padding: 30rpx;">
					<view>{{commentTitle}}</view>
					<view style="padding-left: 0rpx;">
						
						<u-field
									v-model="commentContent"
									label="评论内容:"
									placeholder="请输入评论"
								>
								</u-field>
					</view>
					
					<u-button shape="square" style="margin-top:60rpx" @click="submitComment()">提交</u-button>
				</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseId:'',
				courseInfo:{},
				activeTab:'1',
				showVideo:false,
				classifyId:'',
				yunUrl:'https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/',
				swiper: [],
				chapterClassifyVoList:[],
				intorductionVo:{},
				commentList:[],
				commentType:'',
				commentContent:'',
				commentTitle:'',
				showComment:false,
				videoPlayer:null,
				videoSrc: '',
				canControl: false,
				scrollTop: 0,
				isPraise: false,
				seeVideo: {},
				curCourseId: '', // 当前播放课件Id
			}
		},
		onLoad(option) {
			console.log(option)
			
			this.courseId = option.id
			this.initCourseDetail()
			this.getCarouselCrList()
			this.subscribeMyLesson();
		},
		onUnload() {
			this.updateLessonStudyProgress({});
		},
		methods:{
			subscribeMyLesson(){
				this.$http.subscribeMyLesson(this.courseId).then(res => {
					console.log('订阅返回', res)
				})
			},
			videoSeeTime(e){
				console.log(e.detail);
				this.seeVideo.studyProgress = Math.ceil(e.detail.currentTime / e.detail.duration * 100);
			},
			switchTab(data){
				this.activeTab = data;
				const _ = this;
				const id = ['detail', 'chapter', 'comment'][data - 1];
				this.scrollTop = id;
			},
			goExam(isExercise){
				uni.navigateTo({
					url:'../../exam/detail?examId='+this.classifyId +'&isExercise='+ isExercise
				})
			},
			clickPoint(){
				if(this.isPraise){
					return;
				}
				this.$http.createPraiseMent(this.courseId).then(res=>{
					// this.initCourseDetail();
					this.isPraise = !this.isPraise;
					this.intorductionVo.supportNumber += 1;
				})
			},
			showCommentHandler(){
				this.showComment = true
				this.commentTitle= '课程评论'
			},
			reapply(data){
				this.showComment = true
				this.commentType=data;
				this.commentTitle= '回复评论'
			},
			updateLessonStudyProgress(data){
				if(!this.seeVideo.studyProgress){
					this.seeVideo = data;
					return;
				}
				this.$http.updateLessonStudyProgress({
					coursewareId: this.seeVideo.coursewareId,
					lessonId: this.seeVideo.lessonId,
					studyProgress: this.seeVideo.studyProgress
				}).then(res => {
					console.log('update study progress res', res);
				})
				this.seeVideo = data;
			},
			lessonClick(data, item){
				console.log(data, item);
				this.curCourseId = data.coursewareId
				if(this.seeVideo.lessonId){
					this.updateLessonStudyProgress(data)
				}else{
					this.seeVideo = data; 
				}
				
				
				if(this.videoPlayer){
					this.videoPlayer= null
					this.showVideo=false
				}
				this.canControl = item.isDone;
				setTimeout(()=>{
					this.showVideo=true
					this.$http.getVideoPlaySrc({videoId:data.videoId}).then(res=>{
						if(res.data && res.data.length){
							this.videoSrc = res.data[0].playURL;
						}
						// this.playVideo({playauth:playauth,vid:data.videoId})
					})
				},0)
			},
			playVideo(data){
				this.videoPlayer = new Aliplayer({
					id: 'J_prismPlayer',
					width: '100%',
					autoplay: true,
					//播放方式二：推荐点播用户使用
					vid:data.vid,
					playauth : data.playauth,
					cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
					},function(player){
						console.log('播放器创建好了。',player)
				   });
				   
				   console.log(this.videoPlayer)
			},
			getCarouselCrList(){
				this.$http.getCarouselCrList().then(res => {
					console.log(res)
					this.swiper = res.data.map(item =>{
						item.image = this.yunUrl+ item.imgUrl
						return item
					})
				}).catch(() => {
					console.log(22222)
				});
			},
			submitComment(){
				let obj = {
					lessonId: this.courseId,
					commentId: this.commentType,
					content: this.commentContent
				}
				this.$http.createComment(obj).then(res=>{
						this.commentContent = ''
						uni.showToast({
							title:'评论成功',
							icon:'none'
						})
						this.showComment = false
						this.initCourseDetail()
				})
			},
			initCourseDetail(){
				let obj = { lessonId: this.courseId }
				this.$http.getLessonDetailInfoList(obj).then(res => {
					console.log(res)
					this.courseInfo = res.data
					this.chapterClassifyVoList= res.data.chapterClassifyVoList
					this.intorductionVo = res.data.intorductionVo
					this.commentList = res.data.commentList.slice(0, 2)
					this.classifyId = res.data.classifyId;
					this.isPraise = res.data.isPraise;
				})
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
		
	}
	.section{background: #fff; margin-top: 20rpx;padding:24rpx; box-sizing: border-box;}
	.section-title{
		color: #F53939;
		font-size: 28rpx;
		line-height: 36rpx;
		margin:-10rpx 0 20rpx;
		padding: 20rpx;
		border-bottom: 2px solid #F53939;
		
	}
	.course-name{
		font-size: 28rpx;
		color: #262626; 
		margin-top: 20rpx;
	}
	.course-name.on{
		color:#F53939;
	}
</style>
